<template>
  <div ref="container" class="layer_container">
    <div v-for="(layer,index) in layers">
      <div class="drop_div" v-if="!index" @dragenter="dragenter" @dragleave="dragleave" @dragover="dragover"
           @drop="drop(layer.id,'before')"></div>
      <div :ref="layer.id" class="layer" draggable="true" @dragenter="dragenter(layer.id)"
           @dragleave="dragleave(layer.id)" @dragstart="dragstart(layer.id)" @dragover="dragover"
           @drop="drop(layer.id,'exchange')" @pointerdown.left="activeElement=layer">

        <img class="layerimg" :src="getFilePath(layer.path)" draggable="false" v-if="layer.type=='IMAGE'">
        <img class="layerimg" src="~@/assets/img/SlideEditor/music.png" draggable="false" v-else>
        <span>{{layer.name}}</span>
        <span @click="exchangeLayer(layer,false)">上移</span>
        <span @click="exchangeLayer(layer,true)">下移</span>
        <span @click="DelActiveElement">删除</span>
      </div>
      <div class="drop_div" @dragenter="dragenter" @dragleave="dragleave" @dragover="dragover"
           @drop="drop(layer.id,'after')"></div>
    </div>
  </div>
</template>
<script>
  import { mapActions, mapGetters } from 'vuex'
  import action from '../../common/typeActions'

  export default {
    name: 'SlideEditorLayer',
    data: function () {
      return {}
    },
    computed: {
      ...mapGetters(['layers', 'caseFolder', 'getFilePath']),
      // 活动元素
      activeElement: {
        get () {
          return this.$store.state.slideEditor.activeElement
        },
        set (el) {
          this.$store.dispatch(action.SLIDEEDITOR.SetActiveElement, el)
        }
      }
    },
    methods: {
      ...mapActions({ DelActiveElement: action.SLIDEEDITOR.DelActiveElement }),
      // 开始拖拽图层
      dragstart: function (id) {
        event.dataTransfer.setData('layer', id) // 设置被拖动的数据
      },
      dragenter: function (id) {
        this.setBackground(event, 'red')
      },
      dragleave: function (id) {
        this.setBackground(event, 'transparent')
      },
      dragover: function () {
        event.preventDefault()
      },
      // 拖拽图层完成
      drop: function (id, exchange) {
        let dragEl = event.dataTransfer.getData('layer') // 获取被拖动的数据
        if (id === dragEl) return
        this.$store.dispatch(action.SLIDEEDITOR.ExchangeLayerOrder, {
          dragEl: dragEl,
          dropEl: id,
          exchangeType: exchange
        })
        this.setBackground(event, 'transparent')
      },
      // 交换图层
      exchangeLayer: function (layer, isDown) {
        if (!layer) return
        let layers = this.layers.filter(item => {
          return isDown ? item.index > layer.index : item.index < layer.index
        })
        if (!layers.length) return
        let obj = { dragEl: layer.id }
        if (!isDown) {
          // 向上移动
          if (layers.length === 1) {
            obj.dropEl = layers[0].id
            obj.exchangeType = 'before'
          } else if (layers.length >= 2) {
            obj.dropEl = layers[layers.length - 2].id
            obj.exchangeType = 'after'
          }
        } else {
          // 向下移动
          obj.dropEl = layers[0].id
          obj.exchangeType = 'after'
        }
        this.$store.dispatch(action.SLIDEEDITOR.ExchangeLayerOrder, obj)
      },
      setBackground: function (ev, color) {
        if (ev.target.nodeName !== 'DIV') return
        ev.target.style.background = color
      }
    }
  }
</script>
<style>
  .layer_container {
    position: absolute;
    background-color: transparent;
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  .layer_container .layer {
    margin: 0 auto;
    width: 100%;
    height: 40px;
    border: 1px red solid;
  }

  .layer_container .drop_div {
    height: 10px;
  }

  .layer_container .layerimg {
    width: 20px;
    height: 20px;
    float: left;
  }

  .layer_container::-webkit-scrollbar-thumb {
    background-color: #267abb;
    border-radius: 4px;
  }

  .layer_container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: #cbe2ee;
  }
</style>
